<template>
  <div>
    <div class="container">
      <!-- 用户头像和昵称 -->
      <img :src="userInfo.avatar" alt="用户头像">
      <span>{{userInfo.nickName}}</span>
      <h1 class="collect">我的发布</h1>

      <!-- 文章部分 -->
      <div class="likes-section">
        <div v-if="publishArticleList.length > 0">
          <h1 class="section-title">文章</h1>
          <div v-for="(item, index) in publishArticleList" :key="index" class="article-preview">
            <img :src="item.articleHover" alt="文章图片" class="article-image">
            <!-- 文章类型放置在右上角 -->
            <div class="article-type">{{ item.typeName }}</div>
            <div class="article-details">
              <!-- 文章标题 -->
              <h2>{{ item.articleTitle }}</h2>
              <!-- 发布时间放置在标题下方 -->
              <p>发布时间: {{ item.createTime }}</p>
              <!-- 这里可以添加更多文章详情，如描述、作者等 -->
            </div>
<!--            <div class="article-actions">-->
<!--              &lt;!&ndash; 分享按钮 &ndash;&gt;-->
<!--              <button class="share-button" @click="shareArticle(item)">-->
<!--                <i class="el-icon-share"></i> 分享-->
<!--              </button>-->
<!--              &lt;!&ndash; 删除按钮 &ndash;&gt;-->
<!--              <button @click="removeCollect('article', index, item.id)">-->
<!--                <i class="el-icon-delete"></i>-->
<!--              </button>-->
<!--            </div>-->
          </div>
        </div>
      </div>

      <!-- 问答部分 -->
      <!-- ... -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: localStorage.getItem('activeMenu') || '', // 更新为与默认激活项相匹配的值
      Login: false,
      Register: false,
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : null,
      publishArticleList:[],
      publishProblemList:[]
    }
  },
  computed: {
    userInfo() {
      return this.$store.state.user;
    }
  },
  mounted() {
    const user = localStorage.getItem("user");
    if (user) {
      this.user = JSON.parse(user);
      // 更新Vuex状态等
    }
  },
  created() {
    this.getCollectArticleList();
    this.getCollectProblemList();
  },
  methods: {
    getCollectArticleList() {
      if (this.userInfo.status === 1) {
        this.request.get('article/article/getTeacherPublishArticle/' + this.userInfo.id)
            .then(res => {
              this.publishArticleList = res.publishVoList;
            });
      }
    },
    getCollectProblemList() {
      if (this.userInfo.status === 2) {
        this.request.get('problem/problem/getStudentCollectProblem/' + this.userInfo.id)
            .then(res => {
              if (res.code === 200) {
                this.publishProblemList = res.collectVoList;
              }
            });
      }
    },
    shareArticle(article) {
      console.log('分享文章', index, id);

    },
    removeCollect(type, index, id) {
      // 删除收藏的逻辑
    }
  }
};
</script>

<style scoped>
.container {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 1200px;
  margin: 80px auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 5px;
}

.container img {
  border-radius: 10%;
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin-bottom: 20px;
}

.container span {
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.section-title,
.question-title,
.collect {
  margin: 20px 0;
  padding: 5px 10px;
  color: #ffffff;
  font-size: 18px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}

.section-title {
  background-color: #52bcce;
}

.question-title {
  background-color: orange;
}

.collect {
  background-color: #ce2c2c;
}

.likes-section {
  width: 100%;
  margin-top: 4px;
}

.article-preview {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  border: 1px solid #eaeaea;
  border-radius: 5px;
  padding: 15px;
  position: relative;
}

.article-image {
  width: 200px;
  height: 150px;
  object-fit: cover;
  margin-right: 20px;
  border-radius: 5px;
}

.article-type {
  position: absolute;
  top: 10px; /* 根据实际情况调整 */
  right: 10px; /* 右上角定位 */
  background-color: #52bcce;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  font-size: 14px;
}

.article-details {
  display: flex;
  flex-direction: column; /* 确保文章详情垂直排列 */
  justify-content: start; /* 标题和段落在顶部开始 */
  margin-left: 20px; /* 为文章详情和图片之间添加一些间距 */
}

.article-details p {
  font-size: 16px;
  color: #666;
  margin: 0; /* 确保没有额外的顶部间距 */

}

.article-details h2 {
  margin-bottom: 5px; /* 文章标题与发布时间的间距 */
  font-size: 20px;
  color: #333;
}

.article-actions {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.article-actions button {
  background: none;
  border: none;
  color: #f56c6c;
  font-size: 20px;
  cursor: pointer;
  outline: none;
  padding: 5px;
  border-radius: 50%;
}

.article-actions button:hover {
  color: #e45656;
  background-color: rgba(245, 108, 108, 0.2);
}

@media (max-width: 768px) {
  .container {
    width: auto;
    padding: 20px;
  }

  .article-image {
    width: 150px;
  }

  .article-type {
    top: 5px;
    right: 5px;
    padding: 3px;
  }

  .article-actions button {
    font-size: 18px;
  }
}
</style>